<template>
  <div class="frame">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color="var(--header-bg-color)"
      text-color="var(--header-text-color)"
      active-text-color="#ffd04b"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="logo" class="logo-item">
        <img src="../assets/img/logo.svg" alt="Logo" class="logo" />
      </el-menu-item>
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="blogs">博客</el-menu-item>
      <el-menu-item index="ideas">火花</el-menu-item>
      <el-menu-item index="tools">小工具</el-menu-item>
      <el-sub-menu index="create-center">
        <template #title>创作中心</template>
        <el-menu-item index="add-blog" class="el-sub-menu-item"
          >新博客</el-menu-item
        >
        <el-menu-item index="add-idea" class="el-sub-menu-item"
          >新火花</el-menu-item
        >
      </el-sub-menu>
      <el-menu-item index="about">关于</el-menu-item>
      <el-menu-item index="test">测试</el-menu-item>

      <!-- 此后的菜单项靠右排列 -->
      <div class="flex-grow" />

      <el-menu-item index="ucenter" v-if="isLogin">
        <!-- 用户头像 -->
        <!-- <el-avatar class="user-avator" :size="30" :src="imgurl" /> -->
        <el-avatar class="user-avator" :size="30" />
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="todo">todo</el-dropdown-item>
              <el-dropdown-item command="3">Action 3</el-dropdown-item>
              <el-dropdown-item disabled command="4">Action 4</el-dropdown-item>
              <el-dropdown-item divided command="userLogout"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-menu-item>
      <el-menu-item index="login" v-if="!isLogin">登录</el-menu-item>
      <el-menu-item index="register" v-if="!isLogin">注册</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, watchEffect } from "vue";
  import { useUserStore } from "@/stores/user";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  import { apiUserLogout } from '@/api/user'

  const userStore = useUserStore(); // 使用useStore方法
  const router = useRouter();

  const activeIndex = ref("1");
  const isLogin = ref(userStore.isLogin);

  function handleSelect(index: string) {
    switch (index) {
      case "home":
        router.push("/");
        break;
      case "blogs":
        router.push("/blogs");
        break;
      case "ideas":
        router.push("/ideas");
        break;
      case "about":
        router.push("/about");
        break;
      case "login":
        router.push("/login");
        break;
      case "register":
        router.push("/register");
        break;
      case "tools":
        router.push("/tools");
        break;
      case "ucenter":
        router.push("/ucenter");
        break;
      case "add-blog":
        router.push("/add-blog");
        break;
      case "add-idea":
        router.push("/add-idea");
        break;
      case "test":
        router.push("/ucenter");
        break;
    }
  }

  const handleCommand = (command: string | number | object) => {
    switch (command) {
      case "userLogout":
        apiUserLogout(userStore.userId)
        router.push("/");
        break;
      default:
        ElMessage(`click on item ${command}`);
        break;
    }
  };

  watchEffect(() => {
    isLogin.value = userStore.isLogin;
  })

</script>

<style scoped>
  .frame {
    height: 55px;
    background-color: var(--header-bg-color);
  }

  .el-menu {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    height: 56px;
    width: 90%;
    margin-left: 5%;
    /* background-color: #c4c4c4; */
    /* background-color: #545c64; */
    /* border: 1px solid rgb(180, 180, 180); */
    /* border-radius: 0px; */
  }

  .el-menu-item {
    font-size: 16px;
    /* width: 56px; */
    border: 0px;
  }

  .el-sub-menu-item {
    font-size: 14px;
    /* width: 56px; */
    border: 0px;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .RouterLink {
    flex: 1;
  }

  .logo-item {
    margin-left: 0;
    width: 56px;
    /* 上右下左 */
    /* padding: 0 0 0 0; */
  }
  .logo {
    height: 80%;
    margin-top: 10%;
    margin-right: 0px;
  }

  .user-avator {
    margin: 0 10px 0 20px;
  }

  .el-dropdown-link {
    color: var(--header-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .el-dropdown-menu__item {
    text-align: center;
  }
</style>
